<template>
  <div class="algorithm-page">
    <h1>动态规划算法</h1>
    
    <div class="intro-section">
      <h2>算法介绍</h2>
      <p>动态规划是一种通过把原问题分解为相对简单的子问题的方式求解复杂问题的方法。它的核心思想是将子问题的解存储下来，避免重复计算。</p>
      
      <h3>算法特点：</h3>
      <ul>
        <li>最优子结构：问题的最优解包含子问题的最优解</li>
        <li>重叠子问题：子问题会重复出现</li>
        <li>状态转移：从已知状态推导新状态</li>
      </ul>
    </div>

    <div class="cases-section">
      <h2>经典案例</h2>
      <div class="case-list">
        <el-row :gutter="20">
          <el-col :span="8" v-for="item in cases" :key="item.id">
            <el-card class="case-card" shadow="hover" @click="viewCaseDetail(item.id)">
              <template #header>
                <div class="card-header">
                  <h3>{{ item.name }}</h3>
                </div>
              </template>
              <div class="card-content">
                <p>{{ item.description }}</p>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'DynamicProgramming',
  data() {
    return {
      cases: []
    }
  },
  created() {
    this.fetchCases()
  },
  methods: {
    async fetchCases() {
      try {
        const response = await axios.get('/api/algorithm-cases', {
          params: { type: 'dynamic-programming' }
        })
        if (response.data.code === 0) {
          this.cases = response.data.data
        }
      } catch (error) {
        console.error('获取案例列表失败:', error)
        this.$message.error('获取案例列表失败')
      }
    },
    viewCaseDetail(id) {
      this.$router.push(`/case-detail/${id}`)
    }
  }
}
</script>

<style scoped>
.algorithm-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.intro-section {
  background-color: #f5f5f5;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 30px;
}

.intro-section h2, .intro-section h3 {
  color: #2c3e50;
  margin-bottom: 15px;
}

.intro-section h3 {
  margin-top: 20px;
}

.intro-section ul {
  padding-left: 20px;
  margin-bottom: 20px;
}

.intro-section li {
  margin: 10px 0;
}

.cases-section {
  margin-top: 30px;
}

.case-list {
  margin-top: 20px;
}

.case-card {
  margin-bottom: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.case-card:hover {
  transform: translateY(-5px);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h3 {
  margin: 0;
  color: #34495e;
  font-size: 1.2em;
}

.card-content {
  color: #666;
  font-size: 14px;
  line-height: 1.6;
}

:deep(.el-card__header) {
  padding: 15px 20px;
  border-bottom: 1px solid #ebeef5;
  background-color: #f8f9fa;
}

:deep(.el-card__body) {
  padding: 20px;
}
</style> 